<template>
  <div class="mine_mod" :class="themeClass">
    <div class="mine_mod_box">
      <div class="mine_mod_box_user">
        <img :src="userInfo.avatar" alt="" />
        <div class="mine_mod_box_user_info">
          <p>{{ userInfo.nickname }}</p>
          <p>ID:{{ userInfo.id }} VIP:{{ userInfo.vip }} {{ $t('Mine.credit score') }}:{{ userInfo.credit_score }}</p>
        </div>
        <div class="mine_mod_box_user_setting" @click="$router.push('/mine/settings')">
          <img src="@/assets/img/Gear@2x.png" alt="" />
        </div>
      </div>
      <div class="mine_mod_box_service" :class="themeClass1">
        <van-cell :value="infoShow('1')" is-link @click="jumpCertification(1)" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/IdentificationCard@2x.png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Junior Certification') }}</span>
          </template>
        </van-cell>

        <van-cell :value="infoShow('2')" is-link @click="jumpCertification(2)" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/UserCirclePlus@2x.png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Advanced certification') }}</span>
          </template>
        </van-cell>
        <!-- <van-cell :class="themeClass1">
          <template #title>
            <img src="@/assets/img/Moon1.png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Night mode') }}</span>
          </template>
          <template #right-icon>
            <van-switch v-model="checked" @click="switchChange" size="24px" active-color="#ee0a24" inactive-color="#dcdee0" :active-value="false" :inactive-value="true" />
          </template>
        </van-cell> -->
        <van-divider />
        <van-cell is-link to="/mine/hzjl" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/ClipboardText@2x(2).png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Transfer record') }}</span>
          </template>
        </van-cell>
        <van-cell is-link to="/mine/transaction" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/ClipboardText@2x(2).png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Billing records') }}</span>
          </template>
        </van-cell>
        <van-cell is-link to="/trade/ordernumber" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/ClipboardText@2x(1).png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.spot order') }}</span>
          </template>
        </van-cell>
        <van-cell is-link to="/trade/fasttransaction" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/ClipboardText@2x(3).png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Leveraged positions') }}</span>
          </template>
        </van-cell>
        <van-cell is-link to="/trade/contractposition" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/lever.png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Option positions') }}</span>
          </template>
        </van-cell>
        <van-cell is-link to="/home/lockup/order" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/ClipboardText@2x(1).png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Mining order') }}</span>
          </template>
        </van-cell>
        <van-cell is-link to="/asset/payment" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/Wallet@2x.png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.wallet address') }}</span>
          </template>
        </van-cell>
        <van-divider />
        <van-cell v-if="!isApp" is-link to="/downLoad" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/download.png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Download software') }}</span>
          </template>
        </van-cell>
        <van-cell is-link to="/customerservice" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/Headset24x24@2x(1).png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.online service') }}</span>
          </template>
        </van-cell>
        <van-cell is-link to="/mine/help" :class="themeClass1">
          <template #title>
            <img src="@/assets/img/Question@2x(1).png" alt="" />
            <span class="custom-title" :class="bgColor">{{ $t('Mine.Help Center') }}</span>
          </template>
        </van-cell>
      </div>
    </div>
    <v-footer style="background-color: white" :class="themeClass1"></v-footer>
  </div>
</template>

<script>
export default {
  name: 'mine',
  data() {
    return {
      checked: true,
      isDayTime: false,
      isApp: false
    }
  },
  computed: {
    userInfo() {
      return this.$store.state.userInfo || {}
    },
    themeClass() {
      return this.isDayTime ? '' : 'darknight'
    },
    bgColor() {
      return this.isDayTime ? 'black' : 'white'
    },
    themeClass1() {
      return this.isDayTime ? '' : 'dark_li_color'
    },
    userId() {
      return JSON.parse(localStorage.getItem('userId'))
    }
  },
  watch: {
    '$store.state.nightMode': {
      handler(newVal) {
        this.checked = newVal
        this.isDayTime = newVal
      },
      immediate: true
    }
  },
  activated() {
    this.getIframe()
    this.$store.dispatch('getUserInfo')
  },
  methods: {
    switchChange() {
      this.checked = !this.checked
      this.$store.commit('nightMode', this.checked)
    },
    infoShow(type) {
      let key = ''
      if (type == '1') {
        key = 'is_primary'
      } else {
        key = 'is_senior'
      }
      let info = ''
      switch (this.userInfo[key]) {
        case '0':
          info = this.$t('Mine.not certified')
          break
        case '1':
          info = this.$t('Mine.Certification in progress')
          break
        case '2':
          info = this.$t('Mine.Authentication successful')
          break
        case '3':
          info = this.$t('Mine.Authentication failed')
          break
        default:
          info = ''
      }
      return info
    },
    jumpCertification(type) {
      if (type === 1) {
        this.$router.push('/mine/primary')
      } else {
        this.$router.push('/mine/advanced')
      }
    },
    // 获取当前页面是否iframe打开
    getIframe() {
      if (window.self !== window.top) {
        this.isApp = true
      } else {
        this.isApp = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
@import url('./index.less');
</style>
